<template>
  <div class="tmpl">

      <!-- 利用mui图文列表做新闻列表 -->
<ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
        <router-link v-bind='{to:"/news/newsinfo.vue"}'>
            <img class="mui-media-object mui-pull-left" src="../../../static/images/aa_2.jpg">
            <div class="mui-media-body">
                写定的router
                <p class='mui-ellipsis'>
                        发表时间：2017/09/09
                    <span>
                        点击数:100
                    </span>
                </p>
            </div>
         </router-link>
    </li>
        <li class="mui-table-view-cell mui-media">
        <router-link v-bind='{to:"/news/newsinfo.vue"}'>
            <img class="mui-media-object mui-pull-left" src="../../../static/images/aa_2.jpg">
            <div class="mui-media-body">
                写定的router
                <p class='mui-ellipsis'>
                        发表时间：2017/09/09
                    <span>
                        点击数:100
                    </span>
                </p>
            </div>
         </router-link>
    </li>
  
<!-- 接数组自定义数据 -->
    <li v-for="item in list"  class="mui-table-view-cell mui-media">
        <router-link v-bind='{to:"/news/newsinfo/"+item.id}'>
            <!-- <img class="mui-media-object mui-pull-left" src="../../../static/images/aa_2.jpg"> -->
           <img class="mui-media-object mui-pull-left" :src="item.img_url">
            <div class="mui-media-body">
                {{item.title}}
                <p class='mui-ellipsis'>
                       发表时间： {{ item.add_time | fmtdate('YYYY-MM-DD') }}
                    <span>
                     点击数: {{ item.click  }}  
                    </span>
                </p>
            </div>
        </router-link>
    </li>

</ul>



  </div>
</template>

<style lang="scss" scoped>
.mui-ellipsis{
    display: flex;
    color: #0094ff;
    font-size: 12px;
    margin: 20px 0 0 0 ;
    }

.mui-ellipsis span{
    position: absolute;
    top:50px;
    right:50px;
}
.mui-table-view .mui-media-object{
    max-width: 62px;
    height: 62px;
    line-height: 62px;
}
.mui-table-view-cell{
    padding: 8px 8px;
}
.mui-table-view-cell:after ,.mui-table-view:after{
    left: 0;
}

</style>

<script>
//引用key
//import common from '../../kits/common.js';
export default {
 		data(){
 			return{
 				list:[{
                        id:11,
                        title:"数组对象",
                        add_time:"2017-09-09",
                        click:2,
                        img_url:"http://fanyi.baidu.com/static/translation/img/header/logo_cbfea26.png"
                    },
                    {
                        id:13,
                        title:"数组对象",
                        add_time:"2017-09-09",
                        click:1,
                        img_url:"http://fanyi.baidu.com/static/translation/img/header/logo_cbfea26.png"
                    },
                        {
                        id:14,
                        title:"数组对象",
                        add_time:"2017-09-09",
                        click:1,
                        img_url:"http://fanyi.baidu.com/static/translation/img/header/logo_cbfea26.png"
                    }],
 			
 			}
         }
         ,created(){
             this.getnewslist();
         }
         ,methods:{
                getnewslist(){
                    //利用vue-resoutce请求图文
                    // 讲烈表数据赋值给list属性上
                    //  var url = commom.apihost + '/api/seller';
                 	 this.$http.get("url").then(res=>{
							 this.list = res.data.data;
						 },res=>{
							 console.log('获取失败');
						 });
                }

         }
      
 		
}
</script>

